//引入外部组件中的方法
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
//引入外部组件
//..：从上上级目录出发
import home from '../pages/Home.vue'

//Vue
//选项式API
import optionHome from '@/pages/vue/option/OptionHome.vue'
//组合式API
import combinationHome from '@/pages/vue/combination/CombinationHome.vue'
//setup
import setupHome from '../pages/vue/setup/SetupHome.vue'
import setupTest1 from '../pages/vue/setup/SetupTest1.vue'
import setupTest2 from '../pages/vue/setup/SetupTest2.vue'
import setupTest3 from '../pages/vue/setup/SetupTest3.vue'
//ref
import refHome from '../pages/vue/ref/RefHome.vue'
import refTest1 from '../pages/vue/ref/RefTest1.vue'
import refTest2 from '../pages/vue/ref/RefTest2.vue'
import toRefTest1 from '../pages/vue/ref/ToRefTest1.vue'
import toRefsTest1 from '../pages/vue/ref/ToRefsTest1.vue'
import customRefTest1 from '../pages/vue/ref/CustomRefTest1.vue'
import shallowRefTest1 from '../pages/vue/ref/ShallowRefTest1.vue'
//reactive
import reactiveHome from '../pages/vue/reactive/ReactiveHome.vue'
import reactiveTest1 from '../pages/vue/reactive/ReactiveTest1.vue'
import shallowReactiveTest1 from '../pages/vue/reactive/ShallowReactiveTest1.vue'
//computed
import computedHome from '../pages/vue/computed/ComputedHome.vue'
import computedTest1 from '../pages/vue/computed/ComputedTest1.vue'
//watch
import watchHome from '../pages/vue/watch/WatchHome.vue'
import watchRefTest1 from '../pages/vue/watch/WatchRefTest1.vue'
import watchReactiveTest1 from '../pages/vue/watch/WatchReactiveTest1.vue'
import watchEffectRefTest1 from '../pages/vue/watch/WatchEffectRefTest1.vue'
import watchEffectReactiveTest1 from '../pages/vue/watch/WatchEffectReactiveTest1.vue'
//生命周期
import lifecycleHome from '../pages/vue/lifecycle/LifecycleHome.vue'
import lifecycleTest1 from '../pages/vue/lifecycle/LifecycleTest1.vue'
//自定义hooks
import hooksHome from '../pages/vue/hooks/HooksHome.vue'
import hooksTest1 from '../pages/vue/hooks/HooksTest1.vue'
//readonly与shallowReadonly
import readonlyHome from '../pages/vue/readonly/ReadonlyHome.vue'
import readonlyTest1 from '../pages/vue/readonly/ReadonlyTest1.vue'
import shallowReadonlyTest1 from '../pages/vue/readonly/ShallowReadonlyTest1.vue'
//toRaw与markRaw
import toRawHome from '../pages/vue/toraw/ToRawHome.vue'
import toRawTest1 from '../pages/vue/toraw/ToRawTest1.vue'
//异步加载
import asyncLoadingHome from '../pages/vue/asyncloading/AsyncLoadingHome.vue'
import suspenseTest1 from '../pages/vue/asyncloading/SuspenseTest1.vue'
//组件通信
import componentTransmitHome from '../pages/vue/componenttransmit/ComponentTransmitHome.vue'
import htmlRefTest1 from '../pages/vue/componenttransmit/HtmlRefTest1.vue'
import propsTest1 from '../pages/vue/componenttransmit/PropsTest1.vue'
import propsTest2 from '../pages/vue/componenttransmit/PropsTest2.vue'
import exposeTest1 from '../pages/vue/componenttransmit/ExposeTest1.vue'
import exposeTest2 from '../pages/vue/componenttransmit/ExposeTest2.vue'
import emitsTest1 from '../pages/vue/componenttransmit/EmitsTest1.vue'
import vModelTest1 from '../pages/vue/componenttransmit/VModelTest1.vue'
import provideInjectTest1 from '../pages/vue/componenttransmit/ProvideInjectTest1.vue'
import mittTest1 from '../pages/vue/componenttransmit/MittTest1.vue'
//路由
import routeHome from '../pages/vue/route/RouteHome.vue'
import routeTest1 from '../pages/vue/route/RouteTest1.vue'
import routeTest1Home from '../pages/vue/route/RouteTest1Home.vue'
import routeTest1Page1 from '../pages/vue/route/RouteTest1Page1.vue'
import routeTest1Page2 from '../pages/vue/route/RouteTest1Page2.vue'
import routeTransmitTest1 from '../pages/vue/route/RouteTransmitTest1.vue'
import routeTransmitTest1Home from '../pages/vue/route/RouteTransmitTest1Home.vue'
import routeTransmitTest1Page1 from '../pages/vue/route/RouteTransmitTest1Page1.vue'
import routeTransmitTest1Page2 from '../pages/vue/route/RouteTransmitTest1Page2.vue'
import routeGuardTest1 from '../pages/vue/route/RouteGuardTest1.vue'
import routeGuardTest1Home from '../pages/vue/route/RouteGuardTest1Home.vue'
import routeGuardTest1Page1 from '../pages/vue/route/RouteGuardTest1Page1.vue'
import routeGuardTest1Page2 from '../pages/vue/route/RouteGuardTest1Page2.vue'
//插槽
import slotHome from '../pages/vue/slot/SlotHome.vue'
import slotTest1 from '../pages/vue/slot/SlotTest1.vue'
import slotTest2 from '../pages/vue/slot/SlotTest2.vue'
import slotTest3 from '../pages/vue/slot/SlotTest3.vue'
//全局Api
import globalApiHome from '../pages/vue/globalapi/GlobalApiHome.vue'
import globalComponentTest1 from '../pages/vue/globalapi/GlobalComponentTest1.vue'
import globalConfigTest1 from '../pages/vue/globalapi/GlobalConfigTest1.vue'
import globalDirectiveTest1 from '../pages/vue/globalapi/GlobalDirectiveTest1.vue'
//条件渲染
import vifHome from '../pages/vue/vif/VifHome.vue'
import vifTest1 from '../pages/vue/vif/VifTest1.vue'
import vshowTest1 from '../pages/vue/vif/VshowTest1.vue'
//列表渲染
import vforHome from '../pages/vue/vfor/VforHome.vue'
import vforTest1 from '../pages/vue/vfor/VforTest1.vue'
//列表渲染
import inputHome from '../pages/vue/input/InputHome.vue'
import inputTest1 from '../pages/vue/input/InputTest1.vue'

//pinia
import piniaHome from '../pages/vue/pinia/PiniaHome.vue'
import piniaTest1 from '../pages/vue/pinia/PiniaTest1.vue'

//接口与泛型
import interfaceHome from '../pages/ts/interface/InterfaceHome.vue'
import interfaceTest1 from '../pages/ts/interface/InterfaceTest1.vue'

//创建路由器
let router = createRouter({
    //工作模式，createWebHistory(history模式)，createWebHashHistory(hash模式)
    history: createWebHashHistory(),
    //路由规则
    routes: [
        //name：路由名称，path：路由路径，component：路由组件，redirect：路由重定向，children：子路由
        { path: '/', redirect: '/home' },
        { name: 'home', path: '/home', component: home },
        { name: 'optionHome', path: '/optionHome', component: optionHome },
        { name: 'combinationHome', path: '/combinationHome', component: combinationHome },
        {
            name: 'setupHome', path: '/setupHome', component: setupHome, children: [
                { name: 'setupTest1', path: 'setupTest1', component: setupTest1 },
                { name: 'setupTest2', path: 'setupTest2', component: setupTest2 },
                { name: 'setupTest3', path: 'setupTest3', component: setupTest3 },
            ]
        },
        {
            name: 'refHome', path: '/refHome', component: refHome, children: [
                { name: 'refTest1', path: 'refTest1', component: refTest1 },
                { name: 'refTest2', path: 'refTest2', component: refTest2 },
                { name: 'toRefTest1', path: 'toRefTest1', component: toRefTest1 },
                { name: 'toRefsTest1', path: 'toRefsTest1', component: toRefsTest1 },
                { name: 'customRefTest1', path: 'customRefTest1', component: customRefTest1 },
                { name: 'shallowRefTest1', path: 'shallowRefTest1', component: shallowRefTest1 },
            ]
        },
        {
            name: 'reactiveHome', path: '/reactiveHome', component: reactiveHome, children: [
                { name: 'reactiveTest1', path: 'reactiveTest1', component: reactiveTest1 },
                { name: 'shallowReactiveTest1', path: 'shallowReactiveTest1', component: shallowReactiveTest1 },
            ]
        },
        {
            name: 'computedHome', path: '/computedHome', component: computedHome, children: [
                { name: 'computedTest1', path: 'computedTest1', component: computedTest1 },
            ]
        },
        {
            name: 'watchHome', path: '/watchHome', component: watchHome, children: [
                { name: 'watchRefTest1', path: 'watchRefTest1', component: watchRefTest1 },
                { name: 'watchReactiveTest1', path: 'watchReactiveTest1', component: watchReactiveTest1 },
                { name: 'watchEffectRefTest1', path: 'watchEffectRefTest1', component: watchEffectRefTest1 },
                { name: 'watchEffectReactiveTest1', path: 'watchEffectReactiveTest1', component: watchEffectReactiveTest1 },
            ]
        },
        {
            name: 'lifecycleHome', path: '/lifecycleHome', component: lifecycleHome, children: [
                { name: 'lifecycleTest1', path: 'lifecycleTest1', component: lifecycleTest1 },
            ]
        },
        {
            name: 'hooksHome', path: '/hooksHome', component: hooksHome, children: [
                { name: 'hooksTest1', path: 'hooksTest1', component: hooksTest1 }
            ]
        },
        {
            name: 'readonlyHome', path: '/readonlyHome', component: readonlyHome, children: [
                { name: 'readonlyTest1', path: 'readonlyTest1', component: readonlyTest1 },
                { name: 'shallowReadonlyTest1', path: 'shallowReadonlyTest1', component: shallowReadonlyTest1 },
            ]
        },
        {
            name: 'toRawHome', path: '/toRawHome', component: toRawHome, children: [
                { name: 'toRawTest1', path: 'toRawTest1', component: toRawTest1 },
            ]
        },
        {
            name: 'asyncLoadingHome', path: '/asyncLoadingHome', component: asyncLoadingHome, children: [
                { name: 'suspenseTest1', path: 'suspenseTest1', component: suspenseTest1 },
            ]
        },
        {
            name: 'componentTransmitHome', path: '/componentTransmitHome', component: componentTransmitHome, children: [
                { name: 'htmlRefTest1', path: 'htmlRefTest1', component: htmlRefTest1 },
                { name: 'propsTest1', path: 'propsTest1', component: propsTest1 },
                { name: 'propsTest2', path: 'propsTest2', component: propsTest2 },
                { name: 'exposeTest1', path: 'exposeTest1', component: exposeTest1 },
                { name: 'exposeTest2', path: 'exposeTest2', component: exposeTest2 },
                { name: 'emitsTest1', path: 'emitsTest1', component: emitsTest1 },
                { name: 'vModelTest1', path: 'vModelTest1', component: vModelTest1 },
                { name: 'provideInjectTest1', path: 'provideInjectTest1', component: provideInjectTest1 },
                { name: 'mittTest1', path: 'mittTest1', component: mittTest1 },
            ]
        },
        {
            name: 'routeHome', path: '/routeHome', component: routeHome, children: [
                {
                    name: 'routeTest1', path: 'routeTest1', component: routeTest1, children: [
                        { name: 'routeTest1Home', path: 'routeTest1Home', component: routeTest1Home },
                        { name: 'routeTest1Page1', path: 'routeTest1Page1', component: routeTest1Page1 },
                        { name: 'routeTest1Page2', path: 'routeTest1Page2', component: routeTest1Page2 }
                    ]
                },
                {
                    name: 'routeTransmitTest1', path: 'routeTransmitTest1', component: routeTransmitTest1, children: [
                        //路由query传参
                        { name: 'routeTransmitTest1Home', path: 'routeTransmitTest1Home', component: routeTransmitTest1Home },
                        //路由params传参
                        { name: 'routeTransmitTest1Page1', path: 'routeTransmitTest1Page1/:title/:content?', component: routeTransmitTest1Page1 },
                        //路由props传参
                        {
                            //query模式
                            // name: 'routeTransmitTest1Page2', path: 'routeTransmitTest1Page2', component: routeTransmitTest1Page2,
                            // props(route) {
                            //     return route.query
                            // }

                            //params模式
                            // name: 'routeTransmitTest1Page2', path: 'routeTransmitTest1Page2/:title/:content?', component: routeTransmitTest1Page2,
                            //写法一
                            // props: true
                            //写法二
                            // props(route) {
                            //     return route.params
                            // }

                            //params模式，自定义参数
                            name: 'routeTransmitTest1Page2', path: 'routeTransmitTest1Page2/:title/:content?', component: routeTransmitTest1Page2,
                            props: {
                                title: '自定义传参标题',
                                content: '自定义传参内容'
                            }
                        },
                    ]
                },
                {
                    name: 'routeGuardTest1', path: 'routeGuardTest1', component: routeGuardTest1, children: [
                        { name: 'routeGuardTest1Home', path: 'routeGuardTest1Home', component: routeGuardTest1Home },
                        { name: 'routeGuardTest1Page1', path: 'routeGuardTest1Page1', component: routeGuardTest1Page1 },
                        { name: 'routeGuardTest1Page2', path: 'routeGuardTest1Page2', component: routeGuardTest1Page2 }
                    ], beforeEnter: (to, from, next) => {
                        console.log('路由独享守卫')
                        console.log('index.ts.to：', to)
                        console.log('index.ts.from：', from)
                        console.log('index.ts.next：', next)
                        if (confirm('我是路由独享守卫，确定跳转吗？')) {
                            next()
                        }
                    }
                },
            ]
        },
        {
            name: 'slotHome', path: '/slotHome', component: slotHome, children: [
                { name: 'slotTest1', path: 'slotTest1', component: slotTest1 },
                { name: 'slotTest2', path: 'slotTest2', component: slotTest2 },
                { name: 'slotTest3', path: 'slotTest3', component: slotTest3 },
            ]
        },
        {
            name: 'globalApiHome', path: '/globalApiHome', component: globalApiHome, children: [
                { name: 'globalComponentTest1', path: 'globalComponentTest1', component: globalComponentTest1 },
                { name: 'globalConfigTest1', path: 'globalConfigTest1', component: globalConfigTest1 },
                { name: 'globalDirectiveTest1', path: 'globalDirectiveTest1', component: globalDirectiveTest1 },
            ]
        },
        {
            name: 'vifHome', path: '/vifHome', component: vifHome, children: [
                { name: 'vifTest1', path: 'vifTest1', component: vifTest1 },
                { name: 'vshowTest1', path: 'vshowTest1', component: vshowTest1 },
            ]
        },
        {
            name: 'vforHome', path: '/vforHome', component: vforHome, children: [
                { name: 'vforTest1', path: 'vforTest1', component: vforTest1 },
            ]
        },
        {
            name: 'inputHome', path: '/inputHome', component: inputHome, children: [
                { name: 'inputTest1', path: 'inputTest1', component: inputTest1 },
            ]
        },

        {
            name: 'piniaHome', path: '/piniaHome', component: piniaHome, children: [
                { name: 'piniaTest1', path: 'piniaTest1', component: piniaTest1 }
            ]
        },

        {
            name: 'interfaceHome', path: '/interfaceHome', component: interfaceHome, children: [
                { name: 'interfaceTest1', path: 'interfaceTest1', component: interfaceTest1 },
            ]
        },
    ]
})

//全局路由前置守卫
// router.beforeEach((to, from) => {
//     console.log('全局路由前置守卫')
//     console.log('index.ts.to：', to)
//     console.log('index.ts.from：', from)
//     if (!confirm('我是全局路由前置守卫，确定跳转吗？')) {
//         //取消跳转
//         return false
//     }
// })
//全局路由解析守卫
// router.beforeResolve((to, from) => {
//     console.log('全局路由解析守卫')
//     console.log('index.ts.to：', to)
//     console.log('index.ts.from：', from)
//     if (!confirm('我是全局路由解析守卫，确定跳转吗？')) {
//         //取消跳转
//         return false
//     }
// })
//全局路由后置守卫
// router.afterEach((to, from) => {
//     console.log('全局路由后置守卫')
//     console.log('index.ts.to：', to)
//     console.log('index.ts.from：', from)
// })

//向外部提供属性
export default router